<template>
  <div class="lottery-header-phone">
    <div class="wrapper">
      <div class="left" @click="handleGoBack">
        <span class="icon">
          <i class="iconfont iconstbar_fanhui"></i>
        </span>
        <span class="text">返回</span>
      </div>
      <div class="center">
        <slot></slot>
      </div>
      <div class="right">
        <span class="icon" @click="showSidePanel">
          <i class="iconfont iconstbar_gengduo"></i>
        </span>
      </div>
    </div>
    <div class="modal" v-show="getShowSidePanel">
      <transition name="slide">
        <div class="side-slider" v-show="getShowSidePanel">
          <div class="slider-content">
            <div class="title border-bottom">
              <span class="icon">
                <i class="iconfont more iconstbar_gengduo"></i>
              </span>
              <span class="icon" @click="hideSidePanel">
                <i class="iconfont close iconty_guanbi"></i>
              </span>
            </div>
            <div class="content-wrapper">
              <div class="item border-bottom" v-for="item in sidePanelItems" :key="item.id">
                <span class="icon">
                  <i class="iconfont" :class="item.icon"></i>
                </span>
                <span class="context">
                  {{item.context}}
                </span>
              </div>
              <div class="item border-bottom">
                <span 
                  class="icon last" 
                  @click="toggleSound"
                  :class="isSoundOn ? 'red' : 'dark'"
                  >
                  <i class="iconfont" 
                    :class="isSoundOn ? 'iconindex_tishiyin_kai' : 'iconindex_tishiyin_guan'"
                    >
                  </i>
                </span>
                <span class="context">
                  提示音
                </span>
                <span class="hint" :class="isSoundOn ? 'on' : 'off'">({{isSoundOn ? '开' : '关'}})</span>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import {mapMutations, mapGetters} from 'vuex'
export default {
  data() {
    return {
      sidePanelItems: [
        {
          id: 1,
          context: '充值',
          icon: 'icongd_chongzhi',
          path: ''
        },
        {
          id: 2,
          context: '提现',
          icon: 'icongd_chongzhi',
          path: 'icongd_tixian'
        },
        {
          id: 3,
          context: '订单',
          icon: 'icongd_weijiedingdan',
          path: ''
        },
        {
          id: 4,
          context: '追号记录',
          icon: 'icongd_zhuihaojilu',
          path: ''
        },
        {
          id: 6,
          context: '走势图',
          icon: 'icongd_zoushitu',
          path: ''
        },
        {
          id: 7,
          context: '玩法说明',
          icon: 'icongd_wanfashuoming',
          path: ''
        },
        {
          id: 8,
          context: '在线客服',
          icon: 'icongd_zaixiankefu',
          path: ''
        },
        // {
        //   id: 9,
        //   context: '提示音',
        //   icon: 'iconindex_tishiyin_kai',
        // }
      ],
      isSoundOn: true
    }
  },
  methods: {
    showSidePanel() {
      this.setShowSidePanel(true)
    },
    hideSidePanel() {
      this.setShowSidePanel(false)
    },
    toggleSound() {
      this.isSoundOn = !this.isSoundOn
    },
    handleGoBack() {
      this.$router.back(-1)
    },
    ...mapMutations('lottery', {
      setShowSidePanel: 'SET_SHOW_SIDE_PANEL'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getShowSidePanel'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .lottery-header-phone 
    width 100%
    position fixed 
    top 0 
    left 0
    right 0
    z-index 99
    .wrapper 
      width 100%
      height 48px 
      display flex
      align-items center
      justify-content space-between
      box-sizing border-box 
      padding 0 10px
      background $color-theme-red 
      color $color-text-statetab
      position relative
      .left 
        display flex 
        align-items center
        .icon
          width 20px
          height 22px
          margin-right 5px
          .iconfont 
            font-size 21px
      .center 
        position absolute 
        left 50%
        transform translateX(-50%)
    .modal 
      position fixed
      width 100%
      height 100%
      top 0
      right 0
      bottom 0
      background rgba(0, 0, 0, 0.5)
      .side-slider 
        position fixed 
        top 0
        right 0
        bottom 0 
        width 45%
        background-color #fff
        height 100%
        &.slide-enter-active, &.slide-leave-active
          transition: all 0.2s
        &.slide-enter, &.slide-leave-to
          transform: translate3d(100%, 0, 0)
        .slider-content
          .title
            display flex 
            justify-content space-between 
            width 100% 
            line-height 48px
            box-sizing border-box 
            padding 0 17px
            background $color-text-button
            .icon
              color $color-theme-red
              height 48px
              box-sizing border-box
              .iconfont 
                font-size 25px
                &.more 
                  color $color-theme-dark
          .content-wrapper 
            .item 
              height 45px
              line-height 45px
              bos-sizing border-box 
              padding 0 10px
              &:nth-child(2)
                .iconfont 
                  color $color-ball-green
              &:nth-child(1) 
                .iconfont 
                  color $color-theme-red
              &:last-child 
                display flex
                align-items center
                .hint
                  margin-left 10px 
                  &.on 
                    color $color-theme-red
                  &.off 
                    color $color-theme-dark
                .icon 
                  display inline-block
                  height 16px 
                  width 16px
                  line-height 15px
                  border-radius 50% 
                  background $color-theme-red
                  display flex 
                  align-items center
                  justify-content center
                  margin-right 15px
                  &.red
                    background $color-theme-red
                  &.dark 
                    background $color-theme-dark
                  .iconfont 
                    color #fff
                    font-size 10px
              .icon 
                margin-right 10px
                
              




</style>